<html>
<head>
    <title>Sub Processes to AppServices List View</title>

    <!-- Include Ext stylesheets here: -->
	<link type="text/css" href="./resources/css/ext-all.css" rel="stylesheet" />        

    <!-- Include Ext and app-specific scripts: -->
	<script type="text/javascript" src="./adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="./ext-all-debug.js"></script>

	<!-- My files -->
    <link rel="stylesheet" type="text/css" href="styles2.css">

	<!-- EXAMPLE with data in external file -->
	<script src="./timelinedata/appserviceslist.js" type="text/javascript"></script>
	<script type="text/javascript">
	Ext.onReady(function() {
		//alert(list);
		//alert(list[10])

		var myReader = new Ext.data.ArrayReader({}, [
			{name: 'id', type:'int'},
			{name: 'businessprocess'},
			{name: 'subprocess'},
			{name: 'sptimeline'},
			{name: 'appservice'},
			{name: 'sourcesystem'},
			{name: 'sourcecomponent'},
			{name: 'sinksystem'},
			{name: 'sinkcomponent'},
			{name: 'dataobjecttype'},
			{name: 'dataobject'}
		]);

		var grid = new Ext.grid.GridPanel({
			/*
			store: new Ext.data.GroupingStore({
			            reader: myReader,
			            data: list,
			            sortInfo:{field: 'businessprocess', direction: "ASC"},
			            groupField:'subprocess'
			}),*/
			store: new Ext.data.Store({
				data: list,
				reader: myReader
			}),
			columns: [
				{header: 'ID', width: 25, sortable: true, dataIndex: 'id'},
				{header: 'Business Process', width: 50, sortable: true, dataIndex: 'businessprocess'},
				{header: 'Sub Process', width: 150, sortable: true, dataIndex: 'subprocess'},
				{header: 'Timeline', width: 90, sortable: true, dataIndex: 'sptimeline'},
				{header: 'App Service', width: 150, sortable: true, dataIndex: 'appservice'},
				{header: 'Source System', width: 40, sortable: true, dataIndex: 'sourcesystem'},
				{header: 'Source Component', width: 40, sortable: true, dataIndex: 'sourcecomponent'},
				{header: 'Sink System', width: 40, sortable: true, dataIndex: 'sinksystem'},
				{header: 'Sink Component', width: 40, sortable: true, dataIndex: 'sinkcomponent'},
				{header: 'Data Type', width: 40, sortable: true, dataIndex: 'dataobjecttype'},
				{header: 'Data Object', width: 150, sortable: true, dataIndex: 'dataobject'}
			],
			/*
			viewConfig: new Ext.grid.GroupingView({
			            forceFit:true,
			            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
			}),*/
			viewConfig: {
				forceFit: true
			},
			renderTo: 'content',
			title: 'Sub Process Timeline List View',
			width: 1200,
			autoHeight: true,
			frame: false
		});

		grid.getSelectionModel().selectFirstRow();
	});	
	</script>

</head>
<body>
	<h1>Sub Process to AppServices List View</h1>

    <div id="content">
        
    	<h2>Sub Process to AppServices Timeline List View</h2>
        
	</div>
</body>
</html>
